//1. 引入路由
import Vue from "vue";
import VueRouter from "vue-router";

/* 
  当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
  结合 Vue 的异步组件 (opens new window)和 Webpack 的代码分割功能 (opens new window)，轻松实现路由组件的懒加载。
*/
// import Home from "../views/Home";
// import Login from "../views/Login";
// import News from "../views/Home/components/News";
// import Music from "../views/Home/components/Music";
// import Game from "../views/Home/components/Game";
const Home = () => import("../views/Home");
const Login = () => import("../views/Login");
const News = () => import("../views/Home/components/News");
const Music = () => import("../views/Home/components/Music");
const Game = () => import("../views/Home/components/Game");
const GameItem = () => import("../views/Home/components/Game/Item");

//2. 把路由作为插件使用
Vue.use(VueRouter);

//3. 实例化路由得到路由对象
const router = new VueRouter({
  //设置路由模式为history模式!!!!
  mode: "history",
  //使用routes配置项配置路由表
  routes: [
    {
      path: "/home",
      component: Home,
      //如果当前的路由设置有默认子路由,则不建议书写name命名路由
      // name: "Home",
      //默认子路由配置方式2
      redirect: "/home/news",
      children: [
        {
          //二级路由及多级路由的path两种写法:1.完整的路径  2.只写当前二级路由的字符串地址,不带/
          path: "news",
          component: News,
          name: "News",
          meta: {
            icon: "xxxx",
            title: "新闻",
          },
        },
        {
          path: "music",
          component: Music,
          name: "Music",
        },
        {
          path: "game",
          component: Game,
          name: "Game",
          children: [
            {
              path: "item/:id/:title?",
              component: GameItem,
              name: "GameItem",
              meta: {
                icon: "xxx1",
                tit: "Item组件",
              },
              props($route) {
                return {
                  ...$route.params,
                  ...$route.query,
                  a: 1,
                };
              },
              beforeEnter(to, from, next) {
                console.log("item的路由独享守卫", to, from);
                next();
              },
            },
          ],
        },
        //默认子路由配置方式1
        /*  {
          path: "",
          redirect: "/home/news",
        }, */
      ],
    },
    {
      path: "/login",
      component: Login,
      name: "Login",
    },
    //匹配默认路由
    {
      path: "/",
      //重定向的配置
      redirect: "/home",
    },
  ],
});
/* 
  全局前置守卫(beforeEach):只要当一个导航触发时，全局前置守卫按照创建顺序调用
  全局解析守卫(beforeResolve):在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用(并没有渲染)
  全局后置钩子(afterEach):当整个导航全局结束的时候触发,这些钩子不会接受 next 函数也不会改变导航本身(只能做收尾工作)
  路由独享守卫(beforeEnter):设置给某一个固定的路由的路由表中,当当前的路由被触发的时候,路由独享守卫就会在进入路由之前触发
*/
//一般来说路由守卫都会接受一个回调函数作为参数,回调函数接受3个参数
//1.to:要去的路由的路由对象 2.from:来的路由的路由对象  3.next函数,是否放行的函数
//书写路由全局前置守卫
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫1", to, from);
  next();
});
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫2", to, from);
  next();
});
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫3", to, from);
  next();
});
//书写路由全局解析守卫
router.beforeResolve((to, from, next) => {
  console.log("全局解析守卫", to, from);
  next();
});
//书写路由全局后置钩子
router.afterEach((to, from) => {
  console.log("全局后置钩子", to, from);
});

export default router;
